{$xp_currentnav_html.'<!--END-->'}
<link href="__CDN__/assets/addons/csmitsm/library/xcore/js/element-ui-2.5.4/index.css" rel="stylesheet">
<script src="__CDN__/assets/addons/csmitsm/library/xcore/js/element-ui-2.5.4/vue.js"></script>
<script src="__CDN__/assets/addons/csmitsm/library/xcore/js/element-ui-2.5.4/index.js"></script>
<script src="__CDN__/assets/addons/csmitsm/library/xcore/js/element-ui-2.5.4/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/csmitsm/library/xcore/js/element-ui-2.5.4/vuedraggable.umd.min.js"></script>

<style>
    [v-cloak] {
        display: none;
    }

    #app {
        background-color: white;
    }

    .panel-heading>div {
        display: inline;
        position: relative;
    }

    .nav_item {
        color: #7b8a8b;
        background-color: #d8e0e6;
        padding: 10px 15px;
        display: inline-block;
        width: 100px;
        text-align: center;
        margin-right: 5px;
        cursor: pointer;
    }

    .nav_item.setting {
        background-color: red;
        color: white;
        position: absolute;
        right: 10px;
        width: 80px !important;
        border-radius: 5px;
        padding: 8px 15px !important;
    }

    .nav_item.active {
        background-color: white !important;
        color: #7b8a8b !important;
    }

    .settingcontrol_div {
        padding: 10px;
    }

    .el-container {
        height: 100%;
    }

    .el-aside {
        background-color: #fafafa;
        padding: 10px;
        text-align: center;
    }

    .el-aside .slabel {
        font-weight: bold;
        cursor: pointer;
        line-height: 44px;
        color: #333;
        font-size: 13px;
    }

    .el-aside .slabel.active {
        color: red !important;
    }

    .el-date-editor {
        display: inline-block;
        width: 150px !important;
    }
</style>
<div id="app" v-cloak>
    <div class='panel panel-default panel-intro'>
        <div class='panel-heading'>
            <draggable v-model="sp.views" group="viewtabe" @end="control_dragView" ghost-class="ghost">
                <span v-for="view in sp.views" :key="view.id">
                    <div class="nav_item" :class="(view.id==sp.view_id)?'active':''" @click="click_tabView(view.id)">
                       {{view.name}}</div>
                </span>
            </draggable>
            <div class="nav_item" @click="click_tabAdd">+</div>
            <div class="nav_item setting" @click="click_setting">设置</div>
        </div>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                class="fa fa-refresh"></i> </a>
                        <a href="javascript:;"
                            class="btn btn-success btn-add {:$auth->check('csmitsm/xcflow/add')?'':'hide'}"
                            title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>

    <el-drawer size="50%" :visible.sync="settingcontrol.visible" direction="rtl" :with-header="false">
        <el-container>
            <el-aside width="100px">
                <div class="slabel" v-for="item in dict.slabel" @click="settingcontrol.slabel = item.code"
                    :class="(item.code==settingcontrol.slabel)?'active':null">{{item.label}}</div>
            </el-aside>
            <el-main>
                <el-form ref="settingform" size="mini" :model="settingcontrol.form" label-width="80px"
                    label-position="top">
                    <el-form-item label="视图名称" v-if="settingcontrol.slabel=='base'">
                        <el-input v-model="settingcontrol.form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="查询对象" v-if="settingcontrol.slabel=='base'">
                        <el-select v-model="settingcontrol.form.tablename" placeholder="请选择" style="width:80%;">
                            <el-option v-for="item in sp.tables" :key="item.tablename"
                                :label="item.name+' '+item.tablename" :value="item.tablename">
                            </el-option>
                        </el-select>
                        <el-button type="primary" @click="control_clickDbviewMng">视图管理</el-button>
                        <!-- <el-button @click="control_refreshDbview">刷新</el-button> -->
                    </el-form-item>
                    <el-form-item label="显示字段" v-if="settingcontrol.slabel=='show'">
                        <draggable v-model="settingcontrol.form.showfields" group="showfields" ghost-class="ghost">
                            <el-row v-for="item in settingcontrol.form.showfields" :key="item.fieldcode">
                                <el-col :span="2">
                                    <el-checkbox v-model="item.selected" true-label="Y" false-label="N" :disabled="item.fieldcode=='id'"></el-checkbox>
                                </el-col>
                                <el-col :span="22">{{item.title}} - {{item.fieldcode}}</el-col>
                            </el-row>
                        </draggable>
                    </el-form-item>
                    <el-form-item label="排序" v-if="settingcontrol.slabel=='order'">
                        <draggable v-model="settingcontrol.form.orderbyfields" group="orderbyfields"
                            ghost-class="ghost">
                            <el-row v-for="item in settingcontrol.form.orderbyfields" :key="item.fieldcode">
                                <el-col :span="2">
                                    <el-checkbox v-model="item.selected" true-label="Y" false-label="N"></el-checkbox>
                                </el-col>
                                <el-col :span="14">{{item.title}} - {{item.fieldcode}}</el-col>
                                <el-col :span="8">
                                    <el-select v-model="item.orderby" placeholder="请选择" v-if="item.selected=='Y'">
                                        <el-option v-for="item in dict.orderby" :key="item.code" :label="item.name"
                                            :value="item.code">
                                        </el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                        </draggable>
                    </el-form-item>
                    <el-form-item label="过滤数据" v-if="settingcontrol.slabel=='filter'">
                        <draggable v-model="settingcontrol.form.filterfields" group="filterfields" ghost-class="ghost">
                            <el-row v-for="item in settingcontrol.form.filterfields" :key="item.fieldcode">
                                <el-col :span="2">
                                    <el-checkbox v-model="item.selected" true-label="Y" false-label="N"></el-checkbox>
                                </el-col>
                                <el-col :span="22">
                                    {{item.title}} - {{item.fieldcode}}
                                    <el-row>
                                        <el-col :span="8">
                                            <el-select v-model="item.el" placeholder="请选择" v-if="item.selected=='Y'">
                                                <el-option v-for="item2 in dict.el"
                                                    v-if="item2.types.includes(sr.xcfieldjsonKeyObj[item.fieldcode]['fieldtag'])"
                                                    :key="item2.code" :label="item2.name" :value="item2.code">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                        <el-col :span="16">
                                            <section
                                                v-if="item.selected=='Y'&&['xcform_control_input_string','xcform_control_input_number'].includes(sr.xcfieldjsonKeyObj[item.fieldcode]['fieldtag'])">
                                                <el-input v-model="item.elvalue" placeholder="请输入"
                                                    v-if="['EQ','NEQ','GT','EGT','LT','ELT'].includes(item.el)">
                                                </el-input>
                                                <el-input v-model="item.elvalue1" placeholder="请输入"
                                                    v-if="['BETWEEN'].includes(item.el)"></el-input>
                                                <el-input v-model="item.elvalue2" placeholder="请输入"
                                                    v-if="['BETWEEN'].includes(item.el)"></el-input>
                                                <el-input v-model="item.elvalue" placeholder="多个值,逗号分隔"
                                                    v-if="['in','notin'].includes(item.el)"></el-input>
                                            </section>
                                            <section
                                                v-if="item.selected=='Y'&&['xcform_control_input_string'].includes(sr.xcfieldjsonKeyObj[item.fieldcode]['fieldtag'])">
                                                <el-input v-model="item.elvalue" placeholder="请输入"
                                                    v-if="['LIKE','NOT LIKE'].includes(item.el)"></el-input>
                                            </section>
                                            <section
                                                v-if="item.selected=='Y'&&['xcform_control_input_date'].includes(sr.xcfieldjsonKeyObj[item.fieldcode]['fieldtag'])">
                                                <el-date-picker v-model="item.elvalue" type="date" placeholder="选择日期"
                                                    value-format="yyyy-MM-dd"
                                                    v-if="['EQ','NEQ','GT','EGT','LT','ELT'].includes(item.el)">
                                                </el-date-picker>
                                                <span v-if="['BETWEEN'].includes(item.el)">
                                                    <el-date-picker v-model="item.elvalue1" type="date"
                                                        value-format="yyyy-MM-dd"></el-date-picker>至
                                                    <el-date-picker v-model="item.elvalue2" type="date"
                                                        value-format="yyyy-MM-dd"></el-date-picker>
                                                </span>
                                                <el-input v-model="item.elvalue" placeholder="多个值,逗号分隔"
                                                    v-if="['in','notin'].includes(item.el)"></el-input>
                                            </section>
                                            <section
                                                v-if="item.selected=='Y'&&['xcform_control_input_datetime'].includes(sr.xcfieldjsonKeyObj[item.fieldcode]['fieldtag'])">
                                                <el-date-picker v-model="item.elvalue_ts" type="datetime"
                                                    placeholder="选择日期"
                                                    v-if="['EQ','NEQ','GT','EGT','LT','ELT'].includes(item.el)"
                                                    @change="change_changeDatetime(item,'elvalue')"></el-date-picker>
                                                <span v-if="['BETWEEN'].includes(item.el)">
                                                    <el-date-picker v-model="item.elvalue1_ts" type="datetime"
                                                        value-format="timestamp"
                                                        @change="change_changeDatetime(item,'elvalue1')">
                                                    </el-date-picker>至
                                                    <el-date-picker v-model="item.elvalue2_ts" type="datetime"
                                                        value-format="timestamp"
                                                        @change="change_changeDatetime(item,'elvalue2')">
                                                    </el-date-picker>
                                                </span>
                                            </section>

                                            <section
                                                v-if="item.selected=='Y'&&['xcform_control_objselect'].includes(sr.xcfieldjsonKeyObj[item.fieldcode]['fieldtag'])">
                                                <el-select v-model="item.elvalue" reserve-keyword filterable remote
                                                    placeholder="请输入关键词" v-if="['EQ','NEQ'].includes(item.el)"
                                                    @visible-change="(visible) => handleVisibleChange(visible, sr.xcfieldjsonKeyObj[item.fieldcode]['fieldjsonObj']['xcform_base_selecttablefield']['tablename'])"
                                                    :remote-method="(query) => control_remoteSelectObj(query, sr.xcfieldjsonKeyObj[item.fieldcode]['fieldjsonObj']['xcform_base_selecttablefield']['tablename'])">
                                                    <el-option-group label="常量"
                                                        v-if="['__PREFIX__admin','fa_admin'].includes(sr.xcfieldjsonKeyObj[item.fieldcode]['fieldjsonObj']['xcform_base_selecttablefield']['tablename'])">
                                                        <el-option label="当前登录人" value="[[sessionadminid]]">
                                                        </el-option>
                                                    </el-option-group>
                                                    <el-option-group label="表数据">
                                                        <el-option
                                                            v-for="item in sr.remoteObjselectOptions[sr.xcfieldjsonKeyObj[item.fieldcode]['fieldjsonObj']['xcform_base_selecttablefield']['tablename']]"
                                                            :key="item.id" :label="item.label" :value="item.id">
                                                        </el-option>
                                                    </el-option-group>
                                                </el-select>
                                            </section>

                                            <section v-if="item.selected=='Y'&&['in_sql'].includes(item.el)">
                                                <el-input type="textarea" :placeholder="'select a.'+item.fieldcode+' from table a where a.admin_id=[[sessionadminid]]'" v-model="item.elvalue"></el-input>
                                            </section>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </draggable>
                    </el-form-item>
                    <el-form-item label="过滤SQL" v-if="settingcontrol.slabel=='filter'">
                        <el-input type="textarea" :placeholder="'admin_id=[[sessionadminid]] or role_id in [[sessionroleids]]'" v-model="settingcontrol.form.filtersql"></el-input>
                        当前登录人ID[[sessionadminid]]<BR>当前登录人角色(数组)[[sessionroleids]]
                    </el-form-item>
                    <el-button type="danger" @click="click_deleteView" v-if="settingcontrol.slabel=='delete'">删除视图
                    </el-button>
                </el-form>
            </el-main>
        </el-container>

    </el-drawer>
</div>